<template>
  <footer class="footer">
    <div
      :class="{ active: current === index }"
      v-for="(item, index) in footData"
      :key="item.path"
      @click="gopage(item.path, index)"
    >
      <!-- <i :class="['iconfont', item.iconClass]"></i> -->
      <van-icon :name="item.iconClass" />
      <span>{{ item.name }}</span>
    </div>
  </footer>
</template>
<script>
export default {
  data() {
    return {
      current: 0
    };
  },
  props: {
    footData: {
      type: Array,
      default: () => {
        return [
          { path: "/index", iconClass: "wap-home", name: "首页" },
          { path: "/ask", iconClass: "smile", name: "问答" },
          { path: "/search", iconClass: "like", name: "搜索" },
          { path: "/my", iconClass: "manager", name: "我的" }
        ];
      },
    },
  },
  methods: {
    gopage(path, index) {
      this.$router.push(path);
      this.current = index;
    }
  },
  computed: {
    isActive() {
      return "active";
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler(to, from) {
        let router = to.name;
        switch(router) { 
          case 'index':
            this.current = 0;
            break;
          case 'ask':
            this.current = 1;
            break;
          case 'search':
            this.current = 2;
            break;
          case 'my':
            this.current = 3;
            break;
          default:
            alert('路由错误！');
            break;
        }
      }
    } 
  }
};
</script>

<style lang="less" scoped>
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #232833;
  display: flex;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  > div {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &.active {
      color: #e2b96f;
    }
    i {
      font-size: 18px;
      margin-bottom: 4px;
    }
  }
}
</style>
